<template>
	<div class="login-page">
		<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
			<h2>欢迎登陆</h2>
			<el-form-item label="账号" prop="username">
				<el-input v-model="ruleForm.username" type="text" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="ruleForm.password" type="password" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="验证码" prop="code">
				<el-input v-model="ruleForm.code" auto-complete="off" placeholder="验证码" style="width: 40%" @keyup.enter="submitInfo"> </el-input>
				<div class="login-code">
					<img :src="codeUrl" class="login-code-img" @click="getCode" />
				</div>
			</el-form-item>
			<el-form-item class="tools">
				<el-button :loading="loading" size="small" type="primary" style="width: 100%" @click.prevent="submitInfo">
					<span v-if="!loading">登 录</span>
					<span v-else>登 录 中...</span>
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { userStore } from '@/store';
import { useRouter } from 'vue-router';

const router = useRouter();
const ruleFormRef = ref(null);

const validatePass = (rule, value, callback) => {
	if (value === '') {
		callback(new Error('请输入密码'));
	}
};

const validateAccount = (rule, value, callback) => {
	if (value === '') {
		callback(new Error('请输入账户'));
	}
};

// const validateCaptcha = (rule, value, callback) => {
//   if (value === '') {
//     callback(new Error('请输入验证码'))
//   }
// }

const loading = ref(false);
const codeUrl = ref('');
const store = userStore();
const ruleForm = reactive({
	username: 'ry',
	password: '123456',
	code: '',
	uuid: '',
});

const rules = reactive({
	password: [{ required: true, validator: validatePass, trigger: 'blur' }],
	code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
	username: [{ required: true, validator: validateAccount, trigger: 'blur' }],
});

const submitInfo = () => {
	loading.value = true;
	ruleFormRef.value.validate((valid) => {
		if (!valid) {
			return false;
		}
	});
	store
		.login(ruleForm)
		.then((res) => {
			loading.value = false;
			store.setToken(res.token);
			store.setRoles(res.user.roles);
			store.setPermissions(res.user.permissions);
			store.setLoginUser(res.user.user);

			router.push('/');
		})
		.catch((err) => {
			loading.value = false;
			getCode();
			console.log(err);
		});
};

const getCode = () => {
	store.getCaptcha(ruleForm.uuid).then((res) => {
		ruleForm.uuid = res.uuid;
		codeUrl.value = 'data:image/gif;base64,' + res.img;
	});
};

onMounted(() => {
	getCode();
});
</script>

<style lang="scss" scoped>
.login-page {
	display: flex;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	line-height: 1;
	.demo-ruleForm {
		width: 500px;
		height: 330px;
		padding: 15px 50px 25px 50px;
		border: 1px solid darkgray;
		border-radius: 15px;
		h2 {
			font-size: 30px;
		}
		.login-code {
			width: 33%;
			height: 38px;
			float: right;
			margin-left: 30px;
			img {
				cursor: pointer;
				vertical-align: middle;
			}
		}
		.tools {
			text-align: center;
		}
	}
}
</style>
